<!-- 云闪推管理首页 -->
<template>
	<view class="home-page">
		<view>
			<image class="bj-cls" src="/static/cloud/index-bj.png"></image>
			<view class="header">
				<view class="business-msg">
					<image src="/static/cloud/avater.png"></image>
					<view class="sunui-flex-column flex_1">
						<text class="font-size_38rpx font-weight_bold color_FFFFFF">商家名字</text>
						<view class="v-hint display-a-jc">二级代理</view>
					</view>
				</view>

				<!-- 统计数量 -->
				<view class="sunui-flex-align-center width_100">
					<block v-for="(i, j) in statisticsList" :key="j">
						<view class="flex-column statistics-cls">
							<view>{{ i.num }}</view>
							<text class="font-size_24rpx">{{ i.text }}</text>
						</view>
					</block>
				</view>
				<!-- 图片点击跳转：开头/片尾库 、素材采集、自动成片 -->
				<view class="display-a-js img-list-cls">
					<view class="sunui-flex-column ">
						<image src="/static/cloud/index-icon1.png" class="margin-bottom_20rpx img-cls1" @click="toGo(1)"></image>
						<image src="/static/cloud/index-icon2.png" class="img-cls1"></image>
					</view>
					<image class="img-cls2" src="/static/cloud/index-icon3.png"></image>
				</view>

				<!-- 列表数据 -->
				<sunui-navbar
					:items="tabList"
					lineHeight="70rpx"
					:isCenter="true"
					:currentIndex="currentIndex"
					:size="230"
					color="#5F5D5D"
					fontSize="32rpx"
					activeFontSize="32rpx"
					textAlign="center"
					activeColor="#1E6CEB"
					activeLineWidth="0%"
					activeDirection="center"
					bgColor="#fff"
					:margin="10"
					@change="getChange"
				></sunui-navbar>
				<view class="screen-cls sunui-flex-align-center">
					<picker mode="selector" :range="deviceList" range-key="name" @change="deviceClick" class="width_33 display-a-jc">
						<view class="sunui-flex-align-center device-cls">
							<!-- 设备名称 筛选 -->
							<view>{{ deviceName }}</view>
							<image src="/static/cloud/downward.png"></image>
						</view>
					</picker>
					<picker mode="selector" :range="deviceList" range-key="name" @change="deviceClick" class="width_33 display-a-jc">
						<view class="sunui-flex-align-center device-cls">
							<!-- 设备名称 筛选 -->
							<view>{{ deviceStatus }}</view>
							<image src="/static/cloud/downward.png"></image>
						</view>
					</picker>
					<!-- "年月"日期 -->
					<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month" @change="bindDateChange" class="width_33 display-a-jc">
						<view class="screen-calendar display-a-jc width_100">
							<view class="calendar-cls display-a-jc">
								<view v-if="yeartime">{{ yeartime }}-{{ monthtime }}</view>
								<view v-else>筛选</view>
								<image src="/static/cloud/calendar-icon.png"></image>
							</view>
						</view>
					</picker>
				</view>
				<block v-for="(i, j) in 4" :key="j">
					<!-- 摄像头 -->
					<block v-if="currentIndex == 0">
						<view class="tab-list-cls">
							<view class="display-a-js margin-bottom_20rpx">
								<text class="font-size_32rpx">一号镜头</text>
								<view class="v-status-identifying">在线中</view>
							</view>
							<view class="color_999999 font-size_26rpx">
								到期时间：2023-12-31 16:00
								<text class="v-status-size">空闲中</text>
							</view>
						</view>
					</block>

					<!-- 采集/成片任务 -->
					<block v-if="currentIndex == 1 || currentIndex == 2">
						<view class="tab-tack-cls">
							<view class="display-a-js">
								<view class="sunui-flex-align-center">
									<view class="font-size_32rpx">某某任务</view>
									<view class="v-identifying">使用中</view>
								</view>
								<arprogress :percent="percent" :width="80" :borderWidth="7" activeColor ="#1E6CEB">
									<text class="font-size_12rpx" style="color: #1E6CEB;">{{ percent }}%</text>
								</arprogress>
							</view>
							<view class="sunui-flex-align-center blue-cls">
								<text>绑定摄像头：6个</text>
								<view>已采集素材：105个</view>
							</view>
							<!-- <view class="v-device-cls">使用设备：--</view> -->
							<view class="display-a-js">
								<view class="color_999999 font-size_26rpx">创建时间：2023-12-31 16:00</view>
								<zb-popover placement="bottom-end" :options="actions" ref="Popover2" @handleClick="handleClick1" @select="onSelect">
									<image src="/static/cloud/more.png"></image>
								</zb-popover>
							</view>
						</view>
					</block>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import arprogress from '@/components/ar-circle-progress/index.vue';
export default {
	components:{arprogress},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			percent: 100,
			currentIndex: 1,
			statisticsList: [
				{
					text: '摄像头个数',
					num: 500
				},
				{
					text: '素材数量',
					num: 500
				},
				{
					text: '成片数量',
					num: 500
				}
			],
			tabList: [
				{
					name: '摄像头列表',
					id: 1
				},
				{
					name: '采集任务',
					id: 2
				},
				{
					name: '成片任务',
					id: 3
				}
			],
			/* 设备名称start */
			// 设备名称list
			deviceList: [
				{
					name: '全部',
					id: ''
				},
				{
					name: '已完成',
					id: 1
				},
				{
					name: '未入账',
					id: 2
				}
			],
			deviceName: '设备名称',
			/* 设备名称end */

			/* 设备状态start */
			deviceStatus: '设备状态',
			/* 设备状态end */

			/* 选择日期 start */
			//选择的年份 默认为当前日期的第一个字段（年）
			// yeartime: currentDate.split('-')[0],
			yeartime: '',
			//选择的月份 默认为当前日期的第二个字段（月）
			// monthtime: currentDate.split('-')[1],
			monthtime: '',
			date: '',
			/* 选择日期 end */

			actions: [
				{
					text: '查看素材',
					color: 'color:#1890FF'
				},
				{
					text: '终止任务',
					color: 'color:#1890FF'
				},
				{
					text: '删除任务',
					color: 'color:#FF4636'
				}
			]
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		toGo(index){
			// index:1 开头/片尾库 2 素材采集 3 自动成片
			let url = index=1 ? '/pages/cloudFlashPush/openOrEndLibrary/openOrEndLibrary' : ''
			this.$sun.navGo(url)
		},
		// 获取tabList数据
		getChange(index) {
			this.currentIndex = index;
			// this.mescroll.resetUpScroll();
		},
		// 设备名称选择
		deviceClick(e) {
			// 选中后会触发这个回调函数 e.target.value是你选中的下拉菜单数组的索引
			const index = e.target.value ? e.target.value : 0;
			this.deviceName = this.deviceList[index].name;
			// this.mescroll.resetUpScroll();
		},

		/* 更多操作 start */

		close() {
			this.$refs.Popover2.close();
		},
		handleClick1() {
			this.$refs.Popover1.close();
		},
		onSelect(val) {
			uni.showToast({
				icon: 'none',
				title: val.text
			});
			console.log('===============================', val);
		},

		/* 更多操作 end */

		// 获取日期
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 年月选择
		bindDateChange: function(e) {
			this.date = e.target.value;
			/* 在上面声明变量，split是用来截取字段*/
			this.yeartime = this.date.split('-')[0];
			this.monthtime = this.date.split('-')[1];
			console.log('this.yeartime,this.monthtime', this.yeartime, this.monthtime);
			// this.mescroll.resetUpScroll();
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}
.home-page {
	width: 750rpx;
	position: relative;
	.bj-cls {
		width: 100%;
		height: 678rpx;
	}
	.header {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		.business-msg {
			padding: 88rpx 42rpx 42rpx;
			display: flex;
			align-items: center;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 22rpx;
			}
			.v-hint {
				color: #81aff8;
				font-size: 24rpx;
				width: 122rpx;
				height: 36rpx;
				border-radius: 44rpx;
				background: #fff;
				margin-top: 10rpx;
			}
		}
		.statistics-cls {
			width: calc(100% / 3);
			color: #fff;
			view {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}

		.img-list-cls {
			width: 100% !important;
			padding: 44rpx 24rpx;
			.img-cls1 {
				width: 338rpx;
				height: 168rpx;
			}
			.img-cls2 {
				width: 346rpx;
				height: 360rpx;
			}
		}
		// 筛选class
		.screen-cls {
			width: 100%;
			padding: 20rpx 20rpx 34rpx;
			.device-cls {
				color: #666;
				font-size: 26rpx;
				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0 8rpx;
				}
			}
			// 筛选时间
			.screen-calendar {
				.calendar-cls {
					padding: 0 14rpx;
					height: 48rpx;
					border-radius: 16rpx;
					background: #efefef;
					view {
						color: #666;
						font-size: 26rpx;
						margin-right: 10rpx;
					}
					image {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}

		// 摄像头
		.tab-list-cls {
			margin: 0 40rpx;
			padding: 36rpx 0;
			border-top: 2rpx solid #f4f4f4;
			.v-status-identifying {
				color: #5ebf79;
				font-size: 26rpx;
				background: #e4ffec;
				padding: 8rpx 10rpx;
			}
			.v-status-size {
				color: #1e6ceb;
				padding: 0 20rpx;
			}
		}

		// 采集/成片任务
		.tab-tack-cls {
			margin: 0 40rpx;
			padding: 36rpx 0;
			border-top: 2rpx solid #f4f4f4;
			.v-identifying {
				color: #f00;
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				border-radius: 12rpx;
				background: #ffe6e4;
				margin-left: 8rpx;
			}
			.blue-cls {
				margin: 16rpx 0 28rpx;
				color: #1e6ceb;
				font-size: 26rpx;
				view {
					margin-left: 80rpx;
				}
			}
			.v-device-cls {
				margin: 28rpx 0;
				color: #5b5b5b;
				font-size: 26rpx;
			}
			// 更多操作图标
			image {
				width: 48rpx;
				height: 12rpx;
			}
		}
	}
}
</style>
